import React, {useState} from 'react'
import { message, Input, Button } from 'antd'

import './index.scss'
import { userUnLogin } from '../../api/login'

function UnLoginC (props: any) {
    // 用户所有数据
    const [userMsg, setuserMsg] = useState({
        iphonenum: '',
        username: '',
        passwords: '',
        apasswords: ''
    })
    // btnloading
    const [btnLoading, setBtnLoading] = useState(false)
    
    // ==============================================================================
    // 注册函数
    const unLogin = async() => {
        setBtnLoading(true)
        try {
            const res = await userUnLogin(userMsg)
            if (res.data.massage) {
                setBtnLoading(false)
                message.success(res.data.tishi)
            } else {
                setBtnLoading(false)
                message.error(res.data.tishi)
            }
            
            
        } catch (error) {
            
            console.log(error);
            message.error('服务器异常');
            setBtnLoading(false)
            
        }
    }
    const btnUnlogin = () => {
        if (userMsg.apasswords === userMsg.passwords) {
            unLogin()
            setuserMsg({
                iphonenum: '',
                username: '',
                passwords: '',
                apasswords: ''
            })
        } else {
            message.error('两次输入的密码不一致')
        }
    }
    // change事件
    const numberChange = (e: any): void => {
        // const res = /^[[0-9A-Za-z]]$/
        const res = /^[0-9]*$/
        const { value } = e.target
        if (res.test(value) && value.length<=13) {
            setuserMsg({
                ...userMsg,
                iphonenum: value
            })
        }
    }
    const userNameChange = (e: any): void => {
        // const res = /^[[0-9A-Za-z]]$/
        const res = /^[a-z0-9A-Z]*$/
        const { value } = e.target
        if (res.test(value) && value.length<=13) {
            setuserMsg({
                ...userMsg,
                username: value
            })
        }
    }
    const passwordChange = (e: any): void => {
        // const res = /^[[0-9A-Za-z]]$/
        const res = /^[a-z0-9A-Z]*$/
        const { value } = e.target
        if (res.test(value) && value.length<=13) {
            setuserMsg({
                ...userMsg,
                passwords: value
            })
        }
    }
    const apasswordChange = (e: any): void => {
        // const res = /^[[0-9A-Za-z]]$/
        const res = /^[a-z0-9A-Z]*$/
        const { value } = e.target
        if (res.test(value) && value.length<=13) {
            setuserMsg({
                ...userMsg,
                apasswords: value
            })
        }
    }





    return (
        <div className="unloginc-index animate__animated animate__fadeIn">
            <div className="unlogin-number-div">
                <Input
                 className="unlogin-number-ipt unlogin-ipt-all"
                 placeholder="手机号"
                 value={ userMsg.iphonenum }
                 onChange={numberChange}
                 ></Input>
            </div>
            <div className="unlogin-username-div">
                <Input
                 className="unlogin-username-ipt unlogin-ipt-all"
                 placeholder="账号（数字和英文最长>=13）"
                 value={ userMsg.username }
                 onChange={ userNameChange }
                 ></Input>
            </div>
            <div className="unlogin-password-div">
                <Input.Password
                 className="unlogin-password-ipt unlogin-ipt-all"
                 placeholder="密码（数字和英文最长>=13）"
                 value={ userMsg.passwords }
                 onChange={ passwordChange }
                 ></Input.Password>
            </div>
            <div className="unlogin-apassword-div">
                <Input.Password
                 className="unlogin-apassword-ipt unlogin-ipt-all"
                 placeholder="跟上边的密码保持一致"
                 value={ userMsg.apasswords }
                 onChange={ apasswordChange }
                ></Input.Password>
            </div>
            <div>
                <Button
                 className="unlogin-btn"
                 onClick={ btnUnlogin }
                 loading ={ btnLoading }
                >注册</Button>
            </div>
        </div>
    )
}


export default UnLoginC